
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选项卡切换</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>

<body>

    <div id="app"></div>
    <script type="text/babel">
        function LiBai() {
            return <div>
                <h1>侠客行</h1>
                <p>赵客缦胡缨，吴钩霜雪明。银鞍照白马，飒沓如流星。十步杀一人，千里不留行。事了拂衣去，深藏身与名。</p>

            </div>
        }

        function DuFu() {
            return <div>
                <h1>春望</h1>
                <p>国破山河在，城春草木深。感时花溅泪，恨别鸟惊心。烽火连三月，家书抵万金。白头搔更短，浑欲不胜簪。</p>
            </div>
        }

        function XinQiJi() {
            return <div>
                <h1>青玉案·元夕</h1>
                <p>东风夜放花千树。更吹落、星如雨。宝马雕车香满路。凤箫声动，玉壶光转，一夜鱼龙舞。蛾儿雪柳黄金缕。笑语盈盈暗香去。众里寻他千百度。蓦然回首，那人却在，灯火阑珊处。</p>
            </div>
        }

        class Login extends React.Component {
            constructor(props) {
                super(props)
                this.state = { loginType: 'libai' }
            }
            render() {

                var loginElement = null;
                switch (this.state.loginType) {
                    case 'libai':
                        loginElement = <LiBai />
                        break;
                    case 'dufu':
                        loginElement = <DuFu />
                        break;
                    case 'xinqiji':
                        loginElement = <XinQiJi />
                        break;
                }
                return <div>
                    <div>
                        <button data-type="libai" onClick={(e) => { this.toggle(e) }}>李白</button>
                        <button data-type="dufu" onClick={(e) => { this.toggle(e) }}>杜甫</button>
                        <button data-type="xinqiji" onClick={(e) => { this.toggle(e) }}>辛弃疾</button>
                    </div>
                    {loginElement}
                </div>
            }
            toggle(e) {
                console.log(e.target.textContent)
                this.setState({
                    loginType: e.target.dataset.type
                })
            }
        }

        ReactDOM.render(
            <div>
                <Login />
            </div>,
            document.getElementById('app')
        );
    </script>
</body>

</html>